<template>
	<view>
		<view class="order-info">
			<view class="">您的好友{{ orderInfo.nickname }}</view>
			<view class="">
				<text>转赠{{ orderInfo.number }}周</text>
				<text class="name">{{ orderInfo.product_name }}</text>
				<text>配送给您</text>
			</view>
		</view>
		<view class="title">请完善以下信息并领取</view>
		<view class="send-time">
			<view class="tit">选择送达时间</view>
			<scroll-view :scroll-x="true" class="times">
				<view 
					class="times-item" 
					:class="curItem == index ? 'active' : ''"
					@click="timeClick(index)"
					v-for="(item, index) in timeList" 
					:key="index">
					<view>[{{ getWeek(item.week) }}送达]</view>
					<view>首次{{ item.delivery_time_day }}</view>
				</view>
			</scroll-view>
			<view class="tips acea-row row-column">
				<text>选择收花日期和收花地址后点击领取</text>
				<text>收花时间还可以在个人中心里更改</text>
			</view>
		</view>
		<view class="address acea-row row-between-wrapper padding30">
			<view class="left-box acea-row row-middle" @click="chooseAddress">
				<view class="acea-row" v-if="addressInfo.id">
					<text class="">送至</text>
					<view style="width: 540rpx; padding-left: 30rpx;">
						<view class="user">
							<text style="margin-right: 20rpx;">{{ addressInfo.real_name }}</text>
							<text>{{ addressInfo.phone }}</text>
						</view>
						<view class="">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}{{addressInfo.detail}}</view>
					</view>
				</view>
				<view class="default" v-else>请填写收货地址</view>
			</view>
			<view class="iconfont icon-xiangyou"></view>
		</view>
		<view class="foot">
			<view class="btn acea-row row-middle row-center-wrapper" v-if="orderInfo.status == 0" @click="receive">立即领取</view>
			<view 
				class="btn acea-row row-middle row-center-wrapper bg-gray-black" 
				v-if="orderInfo.status == 1" 
			>已被领取</view>
			<view class="acea-row row-column row-middle text-gray">
				<text>弗洛花园 © 生活本该如此</text>
				<text>客服电话 400-1800-520</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAddressDetail,
	} from '@/api/user.js';
	import {
		transferOrderInfo,
		receiveOrder
	} from '@/api/order.js';
	export default {
		data() {
			return {
				timeList: [],
				curItem: -1,
				addressInfo: {},
				addressId: '',
				orderInfo: {},
				transfer_id: ''
			};
		},
		onLoad(opt) {
			if(opt.id) {
				this.transfer_id = opt.id
				this.getInfo(opt.id)
			}
		},
		onShow() {
			if(uni.getStorageSync('addressId')) {
				this.addressId = uni.getStorageSync('addressId')
				this.getaddressInfo()
				uni.removeStorageSync('addressId')
			}
		},
		methods: {
			// 获取订单信息
			getInfo(id) {
				transferOrderInfo({transfer_id: id}).then(res => {
					// console.log(res)
					this.orderInfo = res.data
					this.timeList = res.data.shipping
				})
			},
			timeClick(index) {
				this.curItem = index
			},
			/*
			 * 获取默认收货地址或者获取某条地址信息
			 */
			getaddressInfo: function() {
				let that = this;
				if (that.addressId) {
					getAddressDetail(that.addressId).then(res => {
						console.log(res)
						that.addressInfo = res.data || {};
						that.addressId = res.data.id || 0;
						uni.removeStorageSync('addressId')
					})
				} 
			},
			// 选择地址
			chooseAddress() {
				uni.navigateTo({
					url: '/pages/users/user_address_list/index'
				})
			},
			getWeek(week){
				let WeekDay = ''
				switch (week) {
					case 'Monday': 
						WeekDay = '周一';
					break;
					case 'Tuesday':
						WeekDay = '周二';
					break;
					case 'Wednesday':
						WeekDay = '周三';
					break;
					case 'Thursday':
						WeekDay = '周四';
					break;
					case 'Friday':
						WeekDay = '周五';
					break;
					case 'Saturday':
						WeekDay = '周六';
					break;
					case 'Sunday':
						WeekDay = '周日';
					break;
				}
				return WeekDay
			},
			// 领取
			receive() {
				if(this.curItem == -1) {
					return this.$util.Tips({
						title: '请选择送达时间'
					});
				}
				if(!this.addressId) {
					return this.$util.Tips({
						title: '请选择收货地址'
					});
				}
				const week = this.timeList[this.curItem].week
				receiveOrder({
					transfer_id: this.transfer_id,
					address_id: this.addressId,
					delivery_week: week
				}).then(res => {
					console.log(res)
					if(res.status == 200) {
						uni.showModal({
						    content: '领取成功',
							confirmText: '确定',
							showCancel: false,
						    success: (res) => {
						        if (res.confirm) {
									uni.redirectTo({
										url: '/pages/users/order_list/index?home=true'
									})
						        } 
						    }
						});
					} else {
						uni.showModal({
						    content: res.msg,
							confirmText: '确定',
							showCancel: false,
						    success: (res) => {
						        if (res.confirm) {
									
						        } 
						    }
						});
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
	font-size: 30rpx;
}
.order-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 50rpx;
	border-top: 1px solid #eee;
	font-size: 30rpx;
	text {
		color: #8888ff;
	}
	.name {
		color: #e1364b;
	}
}
.title {
	width: 100%;
	height: 86rpx;
	line-height: 86rpx;
	background-color: #F2F2F2;
	padding: 0 30rpx;
	font-size: 30rpx;
}
.send-time {
	width: 100%;
	padding: 30rpx;
	border-bottom: 1px solid #eee;
	.tit {
		height: 70rpx;
		line-height: 40rpx;
	}
	.times {
		display: flex;
		white-space: nowrap;
		width: 100%;
		.times-item {
			display: inline-block;
			border: 1px solid #ddd;
			border-radius: 10rpx;
			padding: 30rpx;
			text-align: center;
			color: #666;
			font-size: 28rpx;
			&:not(:last-child) {
				margin-right: 30rpx;
			}
		}
		.active {
			background-color: #9AC83A;
			color: #fff;
			border-color: #9AC83A;
		}
	}
	.tips {
		padding-top: 30rpx;
		color: #999;
	}
}
.address {
	width: 100%;
	border-bottom: 1px solid #eee;
	.left-box {
		flex: 1;
		min-height: 100rpx;
		color: #aaa;
		.user {
			font-weight: 700;
			color: #333;
		}
	}
}
.foot {
	width: 100%;
	padding: 50rpx;
	.btn {
		width: 100%;
		height: 80rpx;
		background-color: #9AC83A;
		color: #fff;
		border-radius: 10rpx;
		margin-bottom: 50rpx;
	}
	.text-gray {
		color: #7F7F7F;
		text {
			&:last-child {
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	}
	.bg-gray-black {
		background-color: #999;
	}
}
</style>
